<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>成绩管理系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            color: #333;
            padding: 20px;
        }

        #app {
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        .table {
            margin-bottom: 20px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #f7b0de;
            color: white;
            font-weight: bold;
        }

        .red {
            color: red;
        }

        .none {
            display: none;
        }

        tfoot {
            font-weight: bold;
        }

        tfoot span {
            margin-right: 20px;
        }

        .form {
            display: flex;
            flex-direction: column;
            margin-bottom: 20px;
        }

        .form-item {
            display: flex;
            margin-bottom: 10px;
        }

        .label {
            width: 80px;
            font-weight: bold;
        }

        .input input {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 100%;
        }

        .submit {
            padding: 10px 20px;
            background-color: #fecf62;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            align-self: flex-end;
        }

        .submit:hover {
            background-color: #f5cd4b;
        }
    </style>
</head>

<body>
    <div id="app" class="score-case">
        <div class="form">
            <div class="form-group">
                <div class="form-item">
                    <div class="label">科目：</div>
                    <div class="input">
                        <input type="text" v-model.trim="subject" placeholder="请输入科目" />
                    </div>
                </div>
                <div class="form-item">
                    <div class="label">分数：</div>
                    <div class="input">
                        <input type="text" v-model.number="score" placeholder="请输入分数" />
                    </div>
                </div>
            </div>
            <div class="form-item">
                <div class="label"></div>
                <div class="input">
                    <button @click="add" class="submit">添加</button>
                </div>
            </div>
        </div>
        <div class="table">
            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>科目</th>
                        <th>成绩</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in list" :key="item.id">
                        <td>{{ index + 1 }}</td>
                        <td>{{ item.subject }}</td>
                        <td :class="{ red: item.score < 60 }">{{ item.score }}</td>
                        <td><a href="#" @click.prevent="del(item.id)">删除</a></td>
                    </tr>
                </tbody>
                <!-- 两个tbody做一个v-if -->
                <tbody v-if="list.length === 0">
                    <tr>
                        <td colspan="4">
                            <span class="none">暂无数据</span>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="4">
                            <span>总分：{{ total }}</span>
                            <span style="margin-left: 50px">平均分：{{ average }}</span>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</html>
<script src="./js/2.7.14_dist_vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            list: [
                { id: 1, subject: '语文', score: 20 },
                { id: 7, subject: '数学', score: 99 },
                { id: 12, subject: '英语', score: 70 },
            ],
            subject: '',
            score: 0
        },

        computed: {
            total() {
                return this.list.reduce((prev, item) => prev + item.score, 0);
            },
            average() {
                if (this.list.length === 0) {
                    return 0;
                }
                return (this.total / this.list.length).toFixed(2);
            }
        },

        methods: {
            del(id) {
                this.list = this.list.filter(item => item.id !== id);
            },
            add() {
                if (this.subject.length === 0 || typeof this.score !== 'number') {
                    return alert('请确认您输入的是正确的内容');
                }
                this.list.unshift({
                    id: +new Date(),
                    subject: this.subject,
                    score: this.score
                });
                this.subject = '';
                this.score = 0;
            }
        }
    });
</script>